<ol class="code clearfix">
  <li v-for="(item,index) in innerRules" :key="index">
    <span
      class="text selector start-tag"
      @click="item.selectorEdit=true"
      v-show="!item.selectorEdit"
    >
      {{ item.selector }}
    </span>
    <input
      data-bind="value: rule.selector, visible: rule.showSelectorInput, hasFocus: rule.showSelectorInput, event: { blur: selectorInputBlur }"
      type="text"
      class="text selector start-tag highlight"
      v-model="item.selector"
      v-show="item.showSelectorInput"
    />
    <span class="separator">{</span>
    <ul class="css-property-list clearfix">
      <li
        v-for="(dec,i) item.declarations"
        :key="i"
        class="css-property-group"
        :class="{'style-item-editing':dec.showDecValue}"
      >
        <span class="text attribute" v-show="!dec.showDecName">{{
          dec.name
        }}</span>
        <input
          type="text"
          data-bind="value: dec.name, typeahead: $component._propertyName, items: 6, defaultShow: false, visible: dec.showDecName, hasFocus: dec.showDecName, event: { blur: dec.decNameInputBlur, keyup: dec.switchToValueInput }"
          class="text attribute highlight input-small"
          :placeholder="Kooboo.text.component.styleEditor.declaration"
          v-model="dec.name"
        />
        <span class="separator">:</span>
        <span
          data-bind="text: dec.valueString() + ';', click: dec.onShowDecValue, visible: !dec.showDecValue(), css: { 'empty': dec.emptyValue }"
          class="text value"
        ></span>
        <input
          type="text"
          data-bind="value: dec.valueString, visible: dec.showDecValue, hasFocus: dec.showDecValue, event: { blur: dec.decValueInputBlur, keyup: handleValueInputKeyPress }, attr: { placeholder: Kooboo.text.component.styleEditor.value }"
          class="text value highlight input-small"
        />
        <span data-bind="visible: dec.showDecValue" class="separator">;</span>
        <!-- ko if: dec.ableToShowChangeImgBtn() && !dec.showDecValue() -->
        <a
          data-bind="click: dec.onPickImageBtnClick, text: Kooboo.text.component.styleEditor.pickImage"
          class="btn btn-xs blue pull-right"
        ></a>
        <!-- /ko -->
        <!-- ko if: dec.ableToShowColorPicker -->
        <input
          data-bind="spectrum: dec.valueString"
          type="text"
          class="pull-left"
          style="display:none;"
        />
        <!-- /ko -->
      </li>
    </ul>
  </li>
</ol>
